<app-navbar title="My Files" [showUploadButton]="true"></app-navbar>
<div class="row-layout_2 row">
  <div class="column-layout column" style="margin: 25px 0px 0px 0px">
    <igx-list class="list">
      <igx-list-item [isHeader]="false" igxRipple igxRippleTarget=".igx-list__item-content" *ngFor="let file of files"
        (click)="loadFileText(file.id)">
        <span igxListThumbnail>
          <igx-avatar icon="insert_drive_file" shape="square" size="small" class="avatar_file"></igx-avatar>
        </span>
        <span igxListLineTitle>{{file.name}}</span>
        <span>
          <igx-icon [igxTooltipTarget]="editTooltipRef" igxListAction family="material" class="icon_edit" [routerLink]="['/editor', file.id]" (click)="onEditClick()">edit</igx-icon>
          <igx-icon [igxTooltipTarget]="deleteTooltipRef" igxListAction family="material" class="icon_delete" (click)="deleteFile(file.id)">delete_outline</igx-icon>
          <igx-icon [igxToggleAction]="shareLinkDialog" [igxTooltipTarget]="shareLinkTooltipRef" igxListAction family="material" class="icon_share" (click)="getShareLink(file.id)" >share</igx-icon>
          <igx-checkbox [igxTooltipTarget]="canShareTooltipRef" igxListAction class="chkBox_canShare" [(ngModel)]="file.canShare" (click)="updateCanShare(file)"></igx-checkbox>
        </span>
      </igx-list-item>
    </igx-list>
  </div>
  <div class="column-layout column" style="justify-content: center; align-items: center;">
    <app-code-editor *ngIf="code != ''" [code]="code" style="height: 100%; width: 100%;"></app-code-editor>
    <div *ngIf="code == ''" class="image_json_group column_json_preview">
      <img src="../../assets/images/json-preview.svg" class="image_json" />
      <h6 class="h6">Preview JSON</h6>
      <p class="ig-typography__subtitle-1 text_json_preview">Select a file to preview</p>
    </div>
  </div>
</div>

<div #editTooltipRef="tooltip" igxTooltip>
  Edit File
</div>

<div #deleteTooltipRef="tooltip" igxTooltip>
  Delete File
</div>

<div #shareLinkTooltipRef="tooltip" igxTooltip>
  Get Share Link
</div>

<div #canShareTooltipRef="tooltip" igxTooltip>
  Enable/Disable Sharing
</div>

<igx-dialog #shareLinkDialog [closeOnOutsideSelect]="true" [closeOnEscape]="true">
  <div>
    <div class="column-layout_2 column">
      <div class="row-layout_1 row">
        <igx-avatar shape="circle" color="hsl(var(--ig-grays-800))" bgColor="hsl(var(--ig-primary-500))" size="small"
          icon="check" class="avatar"></igx-avatar>
        <h5 class="title_1">Link to file</h5>
      </div>
      <div class="row-layout row">
        <igx-input-group type="box" placeholder class="input-group">
          <input type="text" id="shareLinkInputField" [required]="false" [disabled]="false" readonly="true" igxInput
            [value]="shareLink" />
        </igx-input-group>
        <button (buttonClick)="onCopyShareLinkClicked()" igxButton="raised" igxRipple [disabled]="false"
          [igxToggleAction]="shareLinkDialog" class="button_1">
          <span>COPY</span>
        </button>
      </div>
    </div>
  </div>
</igx-dialog>

<igx-dialog #loadingDialog [closeOnOutsideSelect]="false" [closeOnEscape]="false">
  <div class="column-layout_2 column" style="align-items: center;">
    <h5 class="title_1">{{loadingDialogTitle}}</h5>
    <igx-icon font="material" [active]="true" class="loading-icon">donut_large</igx-icon>
  </div>
</igx-dialog>